import React from "react"
import "./mine.css"
import {Icon} from "antd-mobile"
import {isLogin,loggout} from "../../api/index"
import Header from "../header/index"
import Img from "../../assets/images/defaultAvatar.jpg"
class Mine extends React.Component{
    constructor(){
        super()
        this.state={
            status:1,
            username:"",
            id:"",
            gift_amount:"",
            point:"",
            imgUrl:Img
        }
    }
    componentDidMount(){
        console.log(11111111111111111111)
        isLogin().then(res=>{
            console.log(res.data)
            if(!res.data.avatar){
                this.setState({
                    status:res.data.status,
                    username:"登陆/注册"
                })
            }else{
                console.log(1)
                console.log(res.data.username)
                this.setState({
                    status:1,
                    username:res.data.username,
                    id:res.data.id,
                    gift_amount:res.data.gift_amount,
                    point:res.data.point,
                    imgUrl:`//elm.cangdu.org/img/${res.data.avatar}`    
                })
            }
        })
    }

    toMineDetail(){
        //跳转用户详情页面
        if(this.state.status){
            this.props.history.push("/mine/userInfo")
        }else{
            this.props.history.push("/login")
        }
    }
    toCheckout(){
        this.props.history.push("/app/order")
    }
    render(){
       
        return(
            <div>
                <Header title={"我的"}/>
                 <div className="mine-userInfoWrap">
                     <div className="mine-userInfoWrap-inner" onClick={this.toMineDetail.bind(this)}>
                          <div className="userImgWrap">
                          <img src={this.state.imgUrl} />
                          </div>
                          <div className="userNameWrap">
                              <div className="mine-username">{this.state.status?this.state.username:"登陆注册"}</div>
                              <div className="mine-userphone">
                                  <div className="mine-phoneicon">
                                  </div>
                                  <span className="mine-phonetext">暂无绑定手机号码</span>
                              </div>
                          </div>
                          <Icon type="right" className="login-main-rightIcon" />
                     </div>
                 </div>
                 <div className="mine-myCountInfo">
                      <div className="mine-myCountInfo-item">
                          <div className="myCountInfo-item-top">
                              <span className="item-top-inner"><b className="orange">0.00</b>元</span>
                          </div>
                          <div className="myCountInfo-item-bottom">
                               我的余额
                          </div>
                      </div>
                      <div className="mine-myCountInfo-item">
                          <div className="myCountInfo-item-top">
                              <span className="item-top-inner"><b className="red">{this.state.status?this.state.gift_amount:"0"}</b>个</span>
                          </div>
                          <div className="myCountInfo-item-bottom">
                               我的优惠
                          </div>
                      </div>
                      <div className="mine-myCountInfo-item">
                          <div className="myCountInfo-item-top">
                              <span className="item-top-inner"><b className="green">{this.state.status?this.state.point:"0"}</b>分</span>
                          </div>
                          <div className="myCountInfo-item-bottom">
                               我的积分
                          </div>
                      </div>
                 </div>
                 <div className="mine-channelWrap">
                     <div className="mine-channelWrap_item" onClick={this.toCheckout.bind(this)}>
                         <div className="channel-icon"></div>
                         <div className="channel-right">
                             <span className="channel-right-text">我的订单</span>
                             <Icon type="right" className="channel-rightIcon" />
                         </div>
                        
                     </div>
                     <div className="mine-channelWrap_item">
                         <div className="channel-icon2"></div>
                         <div className="channel-right">
                             <span className="channel-right-text">积分商城</span>
                             <Icon type="right" className="channel-rightIcon" />
                         </div>
                        
                     </div>
                     <div className="mine-channelWrap_item">
                         <div className="channel-icon3"></div>
                         <div className="channel-right">
                             <span className="channel-right-text">饿了吗会员卡</span>
                             <Icon type="right" className="channel-rightIcon" />
                         </div>
                        
                     </div>
                 </div>
                 <div className="mine-channelWrap">
                     <div className="mine-channelWrap_item">
                         <div className="channel-icon4"></div>
                         <div className="channel-right">
                             <span className="channel-right-text">服务中心</span>
                             <Icon type="right" className="channel-rightIcon" />
                         </div>
                        
                     </div>
                     <div className="mine-channelWrap_item">
                         <div className="channel-icon5"></div>
                         <div className="channel-right">
                             <span className="channel-right-text">下载饿了吗APP</span>
                             <Icon type="right" className="channel-rightIcon" />
                         </div>
                        
                     </div>
                    
                 </div>
            </div>
        )
    }
}

export default Mine